<template>
  <view class="ss-cube-wrap" :style="[parseAdWrap]">
    <view v-for="(item, index) in data.list" :key="index">
      <view
        class="cube-img-wrap"
        :style="[parseImgStyle(item), { margin: `${data.space}px` }]"
        @tap="sheep.$router.go(item.url)"
      >
        <image class="cube-img" :src="sheep.$url.cdn(item.imgUrl)" mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
import sheep from '@/sheep';

interface CubeItem {
  imgUrl: string;
  width: number;
  height: number;
  top: number;
  left: number;
}

interface CubeData {
  list: CubeItem[];
  style?: {
    marginLeft?: number;
    marginRight?: number;
    padding?: number;
  };
  space: number;
  borderRadiusTop: number;
  borderRadiusBottom: number;
}

interface CubeStyles {
  marginLeft?: number;
  marginRight?: number;
  padding?: number;
}

// 参数
const props = defineProps<{
  data: CubeData;
  styles?: CubeStyles;
}>();

// 单元格大小
const windowWidth = sheep.$platform.device.windowWidth;
const cell = computed(() => {
  return (
    (windowWidth -
      ((props.styles?.marginLeft || 0) + (props.styles?.marginRight || 0) + (props.styles?.padding || 0) * 2)) /
    4
  );
});

//包裹容器高度
const parseAdWrap = computed(() => {
  let heightArr = props.data.list.reduce(
    (prev, cur) => (prev.includes(cur.height + cur.top) ? prev : [...prev, cur.height + cur.top]),
    [],
  );
  let heightMax = Math.max(...heightArr);
  return {
    height: heightMax * cell.value + 'px',
    width:
      windowWidth -
      ((props.data?.style?.marginLeft || 0) +
        (props.data?.style?.marginRight || 0) +
        (props.styles?.padding || 0) * 2) +
      'px',
  };
});

// 解析图片大小位置
const parseImgStyle = (item: CubeItem) => {
  return {
    width: item.width * cell.value - props.data.space + 'px',
    height: item.height * cell.value - props.data.space + 'px',
    left: item.left * cell.value + 'px',
    top: item.top * cell.value + 'px',
    borderTopLeftRadius: props.data.borderRadiusTop + 'px',
    borderTopRightRadius: props.data.borderRadiusTop + 'px',
    borderBottomLeftRadius: props.data.borderRadiusBottom + 'px',
    borderBottomRightRadius: props.data.borderRadiusBottom + 'px',
  };
};
</script>

<style lang="scss" scoped>
.ss-cube-wrap {
  position: relative;
  z-index: 2;
  width: 750rpx;
}

.cube-img-wrap {
  position: absolute;
  z-index: 3;
  overflow: hidden;
}

.cube-img {
  width: 100%;
  height: 100%;
}
</style>
